<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml">

	<ui:define name="content">
		<h:panelGrid id="pnlMain" style="margin:auto;">
			<p:panelGrid id="pnlSession" columns="1"
				rendered="#{sessionBean.agent==null}">
				<h:form id="frmLogin">
					<p:messages id="msgLogin"></p:messages>
					<h:panelGrid columns="2" style="margin:auto;text-align: center">
						<h:panelGrid columns="2" style="margin:auto;">
							<p:outputLabel value="Usuario" id="lblUsername" for="inUsername"></p:outputLabel>
							<p:inputText id="inUsername" required="true"
								requiredMessage="Debe ingresar Username"
								value="#{cCenterController.username}">
							</p:inputText>
							<p:outputLabel value="Clave" id="lblPassword" for="inPassword"></p:outputLabel>
							<p:password id="inPassword" required="true"
								requiredMessage="Debe ingresar Password"
								value="#{cCenterController.password}">
							</p:password>
						</h:panelGrid>
						<p:commandButton id="btnLogin" styleClass="button_login" value=""
							onerror="doError();"
							update=":pnlMain :formStateDetail:pnlStateDetail"
							action="#{cCenterController.doLogin}"></p:commandButton>
					</h:panelGrid>
				</h:form>
			</p:panelGrid>

			<p:panelGrid id="pnlState" rendered="#{sessionBean.agent!=null}"
				columns="1">
				<h:panelGrid>
					<h:form id="formState" prependId="false">
						<p:messages id="state_messages"></p:messages>
						<p:growl id="growl_messages" widgetVar="widgetGrowl"></p:growl>
						<p:poll interval="60" listener="#{cCenterController.updateStatus}" update=":formState:growl_messages" />
						<h:panelGroup id="panel_state" layout="block">
							<h:panelGrid
								rendered="#{sessionBean.currentState=='ready' or sessionBean.currentState=='pause' or sessionBean.currentState=='break'}">
								<p:selectOneMenu id="sessionTypes"
									value="#{sessionBean.sessionTypeSelected}">
									<f:selectItems value="#{sessionBean.sessionTypes}" />
									<p:ajax listener="#{cCenterController.changeState}"
										update=":pnlMain :formStateDetail:pnlStateDetail"></p:ajax>
								</p:selectOneMenu>
							</h:panelGrid>
							<h:panelGrid
								rendered="#{sessionBean.currentState=='breakwithcall' or sessionBean.currentState=='pausewithcall' or sessionBean.currentState=='logoutwithcall' or sessionBean.currentState=='pausewithwindow'}">
								<p:outputLabel
									value="Su estado cambiará al finalizar la llamada en curso." />
							</h:panelGrid>
						</h:panelGroup>
						<h:panelGrid>
							<p:outputLabel value="#{sessionBean.user.person.firstname} #{sessionBean.user.person.lastname} #{sessionBean.agent.code}"></p:outputLabel>
							<p:commandLink value="Más detalle..."
								onclick="PF('dlgStateDetail').show(); return false;" />
						</h:panelGrid>
					</h:form>
				</h:panelGrid>
			</p:panelGrid>
		</h:panelGrid>

		<p:dialog header="Detalle de estados" widgetVar="dlgStateDetail">
			<h:form id="formStateDetail">
				<p:commandButton value="Actualizar" process="@form"
					onerror="doError();" update=":formStateDetail:pnlStateDetail">
				</p:commandButton>
				<h:panelGrid id="pnlStateDetail">
					<p:dataTable var="as" value="#{sessionBean.agent.sessions}">
						<f:facet name="header">Sesión Actual</f:facet>
						<p:column headerText="Campaña">
							<h:outputText value="#{as.campaign.name}"></h:outputText>
						</p:column>
						<p:column headerText="Tipo">
							<h:outputText value="#{as.sessionType.name}"></h:outputText>
						</p:column>
						<p:column headerText="Inicio">
							<h:outputText value="#{as.startedAt}">
								<f:convertDateTime pattern="dd-MM-yyyy HH:mm:ss"
									timeZone="America/Lima" />
							</h:outputText>
						</p:column>
						<p:column headerText="Duración">
							<h:outputText value="#{as.endedAtTempury}">
							</h:outputText>
						</p:column>
					</p:dataTable>
				</h:panelGrid>
			</h:form>
		</p:dialog>

		

	</ui:define>

</ui:composition>
</html>